<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script src="http://code.jquery.com/jquery-latest.js"></script>
	
<script type="text/javascript">
	$(document).ready(function(){
		$("#id").focus();
		$("#joinBtn").click(function(){
			if($("#id").val()==""){
				alert("아이디를 입력해주세요!");
				$("#id").focus();
				return;
			}
			
			if(/[^a-zA-Z0-9]/i.test($("#id").val())){
			       alert("아이디는 영문 또는 숫자 입력하셔야 합니다!");
			       $("#id").focus();
			   return;
			}
			
			if($("#id").val().length < 4){
			       alert("아이디는 4자 이상이여야 합니다!");
			       $("#id").focus();
			   return;
			}



	
			
			if($("#password").val()==""){
				alert("패스워드를 입력해주세요!");
				$("#password").focus();
				return;
			}
			
			if($("#password").val().length < 4){
			       alert("패스워드는 4자 이상이여야 합니다!");
			       $("#password").focus();
			   return;
			}
			
			
			if(!/[0-9]/.test($("#password").val())||!/[a-zA-Z]/i.test($("#password").val())){
			       alert("영어 숫자 혼용 8~20자만 입력하셔야 합니다.");
			       $("#password").focus();
			   return;
			}
			
			if($("select[name=hint]").val()==""){
				alert("비밀번호 힌트를 선택해주세요!");
				return;
			}
			
			if($("#answer").val()==""){
				alert("비밀번호 정답을 입력해주세요!");
				$("#answer").focus();
				return;
			}
			
			if($("#name").val()==""){
				alert("이름을 입력해주세요!");
				$("#name").focus();
				return;
			}
			
			var regExp = /^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})-?[0-9]{3,4}-?[0-9]{4}$/;
			if($("#tel").val()==""){
				alert("전화번호를 입력해주세요!");
				$("#tel").focus();
				return;
			}
			
			else if (!regExp.test(($("#tel").val()))) {
		        alert("잘못된 전화번호입니다. 숫자, - 를 포함한 숫자만 입력하세요. 예) 01048532814");
		        $("#tel").focus();
		        $("#tel").select();
		        return;
		    }
		

			
			if($("#address").val()==""){
				alert("주소를 입력해주세요!");
				$("#address").focus();
				return;
			}
			
		  
		 
			if($("#email").val()==""){
				alert("메일을 입력해주세요!");
				$("#email").focus();
				return;
			}


		
			var mailkind = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
			
				if(!mailkind.test($("#email").val())){
					alert("메일 형식이 맞지 않습니다!");
					$("#email").focus();
					return;
				}



	
			
			if($(":radio[name=gender]:checked").length==0){
				alert("성별을 선택해주세요!");
				return;
			} 
			
			$("#registerForm").submit();
			alert("회원가입 완료!");
			
		});
		
		$("#idCheck").click(function(){
			var id=$("#id").val();
					
		 	if(id==""){
				alert("아이디를 입력해주세요!");
				$("#id").focus();
				return;
			}
		 	
		 	if(/[^a-zA-Z0-9]/i.test($("#id").val())){
			       alert("아이디는 영문 또는 숫자 입력하셔야 합니다!");
			       $("#id").focus();
			   return;
			}
		 	
		 	if($("#id").val().length < 4){
			       alert("아이디는 4자 이상이여야 합니다!");
			       $("#id").focus();
			   return;
			}

		 	$.ajax({
				type:"POST",
				url:"wedding.do",
				data:"command=idCheck&id="+id,
				dataType:"json",
				success:function(data){
					if(data.flag == true){
						$("#idCheckText").html("["+id+"는 중복된 아이디입니다.]");
					}else{
						$("#idCheckText").html("["+id+"는 사용가능합니다.]");
					} 
				}
			});
		});
			

		$("#cancleBtn").click(function(){
			location.href="wedding.do?command=home";
		});
	});
</script>

<form id="registerForm" method="post" action="${initParam.root}/wedding.do">
<input type="hidden" name="command" value="register">
<img src="${initParam.root}/img/join_top.gif"><p></p>
<table border="1" style="border-style:dashed ; border-color:gray ;" align="center">
	<tr align="left">
		<td><img src="${initParam.root}/img/register_icon.jpg">&nbsp;<b><font style="font-size: 12px">ID</font></b></td>
		<td><input type="text" name="id" id="id"><input type="button" name="idCheck" id="idCheck" value="id중복체크"><div id="idCheckText"></div></td>
	</tr>
	
	<tr>
		<td><img src="${initParam.root}/img/register_icon.jpg">&nbsp;<b><font style="font-size: 12px">비밀번호</font></b></td>
		<td><input type="password" name="password" id="password"></td>
	</tr>

	<tr>
		<td><img src="${initParam.root}/img/register_icon.jpg">&nbsp;<b><font style="font-size: 12px">비밀번호 힌트</font></b></td>
		<td> <SELECT NAME="hint" id="hint">
         <OPTION VALUE="">------------------------------------------------</OPTION>
         <OPTION VALUE="1">출신 고등학교 이름은?</OPTION>
         <OPTION VALUE="2">가장 좋아했던 선생님 성함은?</OPTION>
         <OPTION VALUE="3">가장 좋아하는 색깔은?</OPTION>
         <OPTION VALUE="4">사랑하는 사람 이름은?</OPTION>
         <OPTION VALUE="5">가장 좋아하는 음식은?</OPTION>
         <OPTION VALUE="6">가장 좋아하는 영화는?</OPTION>
        </SELECT></td>
	</tr>
	
		
	<tr>
		<td><img src="${initParam.root}/img/register_icon.jpg">&nbsp;<b><font style="font-size: 12px">비밀번호 정답</font></b></td>
		<td><input type="text" name="answer" id="answer"></td>
	</tr>
	
	<tr>
		<td><img src="${initParam.root}/img/register_icon.jpg">&nbsp;<b><font style="font-size: 12px">이름</font></b></td>
		<td><input type="text" name="name" id="name"></td>
	</tr>
	
	<tr>
		<td><img src="${initParam.root}/img/register_icon.jpg">&nbsp;<b><font style="font-size: 12px">전화번호</font></b></td>
		<td><input type="text" name="tel" id="tel"></td>
	</tr>
	
	<tr>
		<td><img src="${initParam.root}/img/register_icon.jpg">&nbsp;<b><font style="font-size: 12px">주소</font></b></td>
		<td><input type="text" name="address" id="address"></td>
	</tr>
	
	<tr>
		<td><img src="${initParam.root}/img/register_icon.jpg">&nbsp;<b><font style="font-size: 12px">E-MAIL</font></b></td>
		<td><input type="text" name="email" id="email"></td>
	</tr>
	
	<tr>
		<td><img src="${initParam.root}/img/register_icon.jpg">&nbsp;<b><font style="font-size: 12px">성별</font></b></td>
		<td><INPUT TYPE="RADIO" NAME="gender" VALUE="man">남
		<INPUT TYPE="RADIO" NAME="gender" VALUE="woman">여</td>
	</tr>
</table>
</form>
<p></p>
<img src="${initParam.root}/img/confirm_button.gif" id="joinBtn" style="margin-left: 380px">
<img src="${initParam.root}/img/cancel_btn.gif" id="cancleBtn" style="margin-left: 3px">

